<template>
    <el-dialog @close="cancleAddMat" v-model="dialogVisible" width="30%" title="添加产品制成" destroy-on-close center>
        <template #default>
            <el-form :model="mat" label-width="100px" label-position="left">
                <el-form-item label="产品物料编码">
                    <el-input
                        v-model="mat.matCode"
                        style="max-width: 600px"
                        placeholder="请选择产品"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseMat" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="产品物料名称">
                    <el-input disabled v-model="mat.matName" aria-placeholder="产品物料名称" />
                </el-form-item>
                <el-form-item label="单位">
                    <el-input disabled v-model="mat.matUnitName" aria-placeholder="单位" />
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input disabled v-model="mat.matModel" aria-placeholder="规格型号" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="mat.notes" aria-placeholder="备注" />
                </el-form-item>
            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addMat">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancleAddMat">取消</el-button>
                </el-col>
            </el-row>
            <ChooseMat :visible="matChooseWinDialogVisible" @optionCompleted="chooseMatCompleted" @justCloseWin="closeChildDialog"/>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
import composeRequest from '@/api/compose.js';
import techniqueMatRequest from '@/api/techniqueMat.js';
import ChooseMat from '../mat/choose/choose.vue';
import {Search} from "@element-plus/icons-vue";
import { ref } from 'vue'
const input3 = ref('')
export default {
    computed: {
        Search() {
            return Search
        }
    },
    components: {
        ChooseMat
    },
    props: ["visible","techniqueId"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加完成事件
    data() {
        return {
            mat: {
                matCode:''
            },// 绑定新增的关联产品信息
            dialogVisible: false,// 添加关联产品窗口的显示与隐藏
            matChooseWinDialogVisible: false,
            matList: [],
            choose: []
        }
    },
    methods: {
        toChooseMat(){
            this.matChooseWinDialogVisible = true;
        },
        chooseMatCompleted(data){
            this.mat.matCode = data.id;
            this.mat.matName = data.name;
            this.mat.matModel = data.model;
            this.mat.matUnitName = data.unitName;
            this.matChooseWinDialogVisible = false;
            console.log("这里得到了matcode")
            console.log(this.mat.matCode);//这里输出的1 介个
        },
        closeChildDialog(){
            this.matChooseWinDialogVisible = false;
        },
        // /**
        //  * 获取组成工序列表
        //  */
        // getProcessList(){
        //     composeRequest.getProcessList(res=>{
        //         this.matList = res.data;
        //     })
        // },
        /**
         * 取消添加关联产品
         */
        cancleAddMat(){
            this.mat = {};
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加关联产品信息
         */
        addMat(){
            this.mat.techniqueId = this.techniqueId;
            techniqueMatRequest.addTechniqueMat(this.mat,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '添加关联产品成功!'
                    });
                    // 通知父组件  操作完成，让父组件关闭窗体
                    this.mat = {};
                    this.$emit("optionCompleted");
                }else{
                    this.$message({
                        type: 'error',
                        message: '添加关联产品失败!'
                    });
                }
            });
        },
    }, mounted(props) {
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });
        //this.getProcessList();
    }
}
</script>
<style>
.input-with-select {
    background-color: var(--el-fill-color-blank);
}
</style>